<script lang="ts" setup>
import { ref, computed, Ref, watch, reactive } from 'vue';
import { getAllMediators } from '@/axios/mediator/mediatorReq';
import { getUnCompletedCases, nullifyCase } from '@/axios/case/caseReq'
import { Case, CaseStatus } from '@/types/response/case';
import detailedCase from '@/compontent/detailedCase.vue'; // 导入 detailedCase 组件
import Notice from '@/utils/notice';
import { TimeUtil } from '@/utils/timeUtil';
//用户筛选时输入的状态
const caseState = ref<number>()
const mId = ref<number>()
const stateOptions = [
  {
    value: CaseStatus.accepted,
    label: CaseStatus.getCommentByStatus(CaseStatus.accepted),
  },
  {
    value: CaseStatus.waitMediate,
    label: CaseStatus.getCommentByStatus(CaseStatus.waitMediate),
  },
  {
    value: CaseStatus.choosedRepaymented,
    label: CaseStatus.getCommentByStatus(CaseStatus.choosedRepaymented),
  },
];
let timeRange = ref([]);
const cases: Ref<Case[]> = ref([]);
const getCases = async () => {
  let result = await getUnCompletedCases();
  cases.value = result;
}
let nullify = {
  showNullify(c: Case) {
    if (c.caseState == CaseStatus.waitOrder)  return true
    return false;
  },
  nullify(c: Case) {
    nullifyCase(c.caseId).then((res) => {
      if (res) {
        cases.value.splice(cases.value.indexOf(c), 1)
        Notice.success("作废成功");
      } else {
        Notice.error("作废失败");
      }
    })
  }
}

// 获取调解员列表
const mediators = ref([]);

const getMediators = async () => {
  let result = await getAllMediators();
  mediators.value = result;
};


// 控制详细案件弹窗
let detailedDialog = reactive({
  visible: false,
  case: new Case(),
  look(c: Case) {
    detailedDialog.case = c;
    detailedDialog.visible = true;
  },
  close() {
    detailedDialog.visible = false;
  }
})




// 计算属性，根据筛选条件过滤 cases
const filteredCases = computed(() => {
  return cases.value.filter(caseItem => {
    if (caseState.value !== undefined && caseItem.caseState !== caseState.value) {
      return false;
    }
    if (mId.value !== undefined && caseItem.mId !== mId.value) {
      return false;
    }
    if (timeRange.value?.length) {
      let startTime = new Date(timeRange.value[0]);
      let endTime = new Date(timeRange.value[1]);
      endTime = new Date(endTime.getTime() + 1000 * 60*60 * 24);
      console.log(TimeUtil.toSimpleTimeString(startTime),TimeUtil.toSimpleTimeString(endTime))
      let createdTime = new Date(caseItem.createdTime);
      return TimeUtil.TimeInRange(startTime, endTime, createdTime)
    }
    return true;
  });
});

getCases();
getMediators();
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>调解中案件</span>
      </div>
    </template>

    <!-- 搜素表单 -->
    <el-form inline>
      <el-form-item label="案件状态：">
        <el-select v-model="caseState" style="width: 200px" clearable placeholder="请选择状态">
          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="调解员：">
        <el-select style="width: 200px" clearable placeholder="请选择调解员" v-model="mId">
          <el-option v-for="item in mediators" :key="item.mId" :label="item.name" :value="item.mId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker v-model="timeRange"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange" start-placeholder="开始时间"
          end-placeholder="结束时间" /></el-form-item>
    </el-form>



    <el-table :data="filteredCases" style="width: 100%">
      <el-table-column label="申请人" prop="applicant.name"></el-table-column>
      <el-table-column label="调解员" prop="mediator.name">
        <template #default="scope">
          {{ Case.getMediatorName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="调解时间" prop="mediatorTime">
        <template #default="scope">
          {{ Case.getMediationTime(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdTime"></el-table-column>
      <el-table-column label="案件状态" prop="caseState">
        <template #default="scope">
          {{ CaseStatus.getCommentByStatus(scope.row.caseState) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="40">
        <template #default="scope">
          <el-button link type="primary" @click="detailedDialog.look(scope.row)">
            查看
          </el-button>
          <el-button link type="danger" v-if="nullify.showNullify(scope.row)" @click="nullify.nullify(scope.row)">
            作废
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <detailed-case :caseId="detailedDialog.case.caseId" :case="detailedDialog.case" v-model="detailedDialog.visible" />
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>